<template>
	<transition name="el-zoom-in-center">
		<div class="JNPF-preview-main">
			<div class="JNPF-common-page-header">
				<el-page-header @back="goBack" :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"/>
				<div class="options">
					<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
					<el-button @click="goBack">取 消</el-button>
				</div>
			</div>
			<el-row :gutter="15"  class="main" :style="{margin: '0 auto',width:'100%'}">
			<el-form ref="elForm" :model="dataForm" size="medium" label-width="180px" label-position="right" :disabled="!!isDetail" :rules="rules">
				<el-col :span="8">
					<el-form-item label="品名" prop="pm" required >
						<el-input v-model="dataForm.pm" placeholder="请输入品名" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="统一编码" prop="tybm" required >
						<el-input v-model="dataForm.tybm" placeholder="请输入统一编码" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="所属单位" prop="sydw" required >
						<el-select filterable v-model="dataForm.sydw" placeholder="请选择所属单位" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in sydwOptions" :key="index" :label="item.F_FullName" :value="item.F_Id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="CAS号" prop="cash" >
						<el-input v-model="dataForm.cash" placeholder="请输入CAS号" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="所属重大危险源名称" prop="sszdwxydymc" >
						<el-select v-model="dataForm.sszdwxydymc" placeholder="请选择所属重大危险源名称" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in sszdwxydymcOptions" :key="index" :label="item.ZDWXYMC" :value="item.ID" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="危险化学品目录序号" prop="wxhxpmlxh" required >
						<el-input v-model="dataForm.wxhxpmlxh" placeholder="请输入危险化学品目录序号" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="危化品类别" prop="whplb" required >
						<el-input v-model="dataForm.whplb" placeholder="请输入危化品类别" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="物质形态" prop="wzxt" required >
						<el-select v-model="dataForm.wzxt" placeholder="请选择物质形态" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in wzxtOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="年消耗量" prop="nxhl" required >
						<el-input v-model="dataForm.nxhl" placeholder="请输入年消耗量" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="最大储存量" prop="zdccl" required >
						<el-input v-model="dataForm.zdccl" placeholder="请输入最大储存量" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="实际储量" prop="sjcl" required >
						<el-input v-model="dataForm.sjcl" placeholder="请输入实际储量" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="存储位置" prop="ccwz" required >
						<el-input v-model="dataForm.ccwz" placeholder="请输入存储位置" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="储存方式" prop="ccfs" required >
						<el-input v-model="dataForm.ccfs" placeholder="请输入储存方式" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="是否为危化品" prop="sfwwhp" required >
						<el-radio-group v-model="dataForm.sfwwhp" :style='{}' >
							<el-radio v-for="(item, index) in sfwwhpOptions" :key="index" :label="item.id"  >{{item.fullName}}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="所在工艺流程" prop="szgylc" >
						<el-input v-model="dataForm.szgylc" placeholder="请输入所在工艺流程" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="是否易制爆" prop="sfyzb" required >
						<el-radio-group v-model="dataForm.sfyzb" :style='{}' >
							<el-radio v-for="(item, index) in sfyzbOptions" :key="index" :label="item.id"  >{{item.fullName}}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="是否剧毒化学品" prop="sfjdhxp" required >
						<el-radio-group v-model="dataForm.sfjdhxp" :style='{}' >
							<el-radio v-for="(item, index) in sfjdhxpOptions" :key="index" :label="item.id"  >{{item.fullName}}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="是否易制毒" prop="sfyzd" required >
						<el-radio-group v-model="dataForm.sfyzd" :style='{}' >
							<el-radio v-for="(item, index) in sfyzdOptions" :key="index" :label="item.id"  >{{item.fullName}}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="是否重点监管危险化学品" prop="sfzdjgwxhxp" required >
						<el-radio-group v-model="dataForm.sfzdjgwxhxp" :style='{}' >
							<el-radio v-for="(item, index) in sfzdjgwxhxpOptions" :key="index" :label="item.id"  >{{item.fullName}}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="是否特别管控危险化学品" prop="sftbgkwxhxp" required >
						<el-radio-group v-model="dataForm.sftbgkwxhxp" :style='{}' >
							<el-radio v-for="(item, index) in sftbgkwxhxpOptions" :key="index" :label="item.id"  >{{item.fullName}}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="安全措施" prop="aqcs" required >
						<el-input v-model="dataForm.aqcs" placeholder="请输入安全措施" show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":4}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="应急处置措施" prop="yjczcs" required >
						<el-input v-model="dataForm.yjczcs" placeholder="请输入应急处置措施" show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":4}' >
						</el-input>
					</el-form-item>
				</el-col>
			</el-form>
			</el-row>
		</div>
	</transition>

</template>
<script>
import request from '@/utils/request'
import {getDictionaryDataSelector}from '@/api/systemData/dictionary'
import {previewDataInterface}from '@/api/systemData/dataInterface'
export default {
    data() {
      return {
        visible: false,
        isDetail: false,
        dataForm: {
					pm:undefined,
					tybm:undefined,
					sydw:undefined,
					cash:undefined,
					sszdwxydymc:undefined,
					wxhxpmlxh:undefined,
					whplb:undefined,
					wzxt:undefined,
					nxhl:undefined,
					zdccl:undefined,
					sjcl:undefined,
					ccwz:undefined,
					ccfs:undefined,
					sfwwhp:'0',
                    szgylc:undefined,
                    sfyzb:'0',
                    sfjdhxp:'0',
                    sfyzd:'0',
                    sfzdjgwxhxp:'0',
                    sftbgkwxhxp:'0',
					aqcs:undefined,
					yjczcs:undefined,

        },
        rules: {
						pm:[
						{
							required:true,
							message:'请输入品名',
							trigger:'blur'
						},
						],
						tybm:[
						{
							required:true,
							message:'请输入统一编码',
							trigger:'blur'
						},
						],
						sydw:[
						{
							required:true,
							message:'请输入所属单位',
							trigger:'blur'
						},
						],
						wxhxpmlxh:[
						{
							required:true,
							message:'请输入危险化学品目录序号',
							trigger:'blur'
						},
						],
						whplb:[
						{
							required:true,
							message:'请输入危化品类别',
							trigger:'blur'
						},
						],
						wzxt:[
						{
							required:true,
							message:'请输入物质形态',
							trigger:'blur'
						},
						],
						nxhl:[
						{
							required:true,
							message:'请输入年消耗量',
							trigger:'blur'
						},
						],
						zdccl:[
						{
							required:true,
							message:'请输入最大储存量',
							trigger:'blur'
						},
						],
						sjcl:[
						{
							required:true,
							message:'请输入实际储量',
							trigger:'blur'
						},
						],
						ccwz:[
						{
							required:true,
							message:'请输入存储位置',
							trigger:'blur'
						},
						],
						ccfs:[
						{
							required:true,
							message:'请输入储存方式',
							trigger:'blur'
						},
						],
						sfwwhp:[
						{
							required:true,
							message:'请输入是否为危化品',
							trigger:'blur'
						},
						],
						sfyzb:[
						{
							required:true,
							message:'请输入是否易制爆',
							trigger:'blur'
						},
						],
						sfjdhxp:[
						{
							required:true,
							message:'请输入是否剧毒化学品',
							trigger:'blur'
						},
						],
						sfyzd:[
						{
							required:true,
							message:'请输入是否易制毒',
							trigger:'blur'
						},
						],
						sfzdjgwxhxp:[
						{
							required:true,
							message:'请输入是否重点监管危险化学品',
							trigger:'blur'
						},
						],
						sftbgkwxhxp:[
						{
							required:true,
							message:'请输入是否特别管控危险化学品',
							trigger:'blur'
						},
						],
						aqcs:[
						{
							required:true,
							message:'请输入安全措施',
							trigger:'blur'
						},
						],
						yjczcs:[
						{
							required:true,
							message:'请输入应急处置措施',
							trigger:'blur'
						},
						],

        },
				sydwOptions:[],
				sszdwxydymcOptions:[],
				wzxtOptions:[{"fullName":"固态","id":"1"},{"fullName":"液态","id":"2"},{"fullName":"气态","id":"3"},{"fullName":"等离子态","id":"4"}],
				sfwwhpOptions:[{"fullName":"否","id":"0"},{"fullName":"是","id":"1"}],
				sfyzbOptions:[{"fullName":"否","id":"0"},{"fullName":"是","id":"1"}],
				sfjdhxpOptions:[{"fullName":"否","id":"0"},{"fullName":"是","id":"1"}],
				sfyzdOptions:[{"fullName":"否","id":"0"},{"fullName":"是","id":"1"}],
				sfzdjgwxhxpOptions:[{"fullName":"否","id":"0"},{"fullName":"是","id":"1"}],
				sftbgkwxhxpOptions:[{"fullName":"否","id":"0"},{"fullName":"是","id":"1"}],


      }
    },
    created() {
		this.getSydwOptions();
		this.getSszdwxydymcOptions();

    },
    methods: {
		getSydwOptions()
		{
			previewDataInterface('772d2cbcadd24df79243e3d92ef5f690').then(res => {
				this.sydwOptions = res.data
			})
		},
		getSszdwxydymcOptions()
		{
			previewDataInterface('707f1102bce74818a551ebcfa88f2321').then(res => {
				this.sszdwxydymcOptions = res.data
			})
		},

           goBack() {
                    this.$emit('refresh')
                },
      init(id, isDetail) {

        this.dataForm.id = id || 0;
        this.visible = true;
        this.isDetail = isDetail || false;
        this.$nextTick(() => {
          this.$refs['elForm'].resetFields();
          if (this.dataForm.id) {
            request({
              url: '/api/System/SCYL/' + this.dataForm.id,
              method: 'get'
            }).then(res =>{
              this.dataForm = res.data;

            })
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['elForm'].validate((valid) => {
          if (valid) {

            if (!this.dataForm.id) {
              request({
                url: '/api/System/SCYL',
                method: 'post',
                data: this.dataForm,
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            } else {
              request({
                url: '/api/System/SCYL/' + this.dataForm.id,
                method: 'PUT',
                data: this.dataForm
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            }
          }
        })
      },

    }
  }
  </script>